<template>
	<view class="main">
		<view class="" v-if="cous.name !=''">
			<view class="posr">
				<u-image :src="cous.image" width="100%" height="288rpx" border-radius="20">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="content box box-pack-between box-align-center padd20">
					<view class="" style="padding: 0 30rpx;">
						<view class="title">
							{{cous.name}}
						</view>
						<view class="zb">
							主编：{{cous.material}}
						</view>
					</view>
				</view>
				<view class="cont-detail" @click="show =!show">
					详情
				</view>
			</view>
			<view class="course-cont">
				<view class="cont-top box box-tb box-pack-start">
					<view class="tabbar active">
						课程学习
					</view>
					<view class="cnt">
						共{{stageList.length}}章
					</view>
				</view>
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="`第${stage.num}章   ${stage.title}`" v-for="(stage, indexs) in stageList"
						:key="indexs">
						<view class="">
							<view v-for="(item, index) in stage.sections" :key="index"
								@click="goDetail(item,index,indexs)">
								<view v-if="index == 0">
									<view class="box box-align-center box-pack-between slot-title">
										<view class="box box-align-center box-pack-start">
											<view class="ml5 number" v-if="item.num<=9">
												{{`0${item.num}`}}
											</view>
											<view class="ml5 number" v-else>
												{{`${item.num}`}}
											</view>
											<view class="box box-tb box-align-start box-pack-center ml10">
												<view class="times" style="font-size: 28rpx;">
													{{item.title}}
												</view>
												<view class="box box-align-center box-pack-start"
													v-if="item.time !=null">
													<u-image src="@/static/home/icon_mp4.png" width="31rpx"
														height="31rpx">
														<u-loading slot="loading"></u-loading>
													</u-image>
													<view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
														{{item.time}}
													</view>
												</view>
											</view>
										</view>
										<view class="box box-align-center box-pack-end" style="font-size: 24rpx;">
											已完成
											<view class="percent ml10">{{item.rate}}%</view>
										</view>
									</view>

								</view>
								<view class="" v-else>
									<view class="box box-align-center box-pack-between slot-title">
										<view class="box box-align-center box-pack-start">
											<view class="ml5 number" v-if="item.num<=9">
												{{`0${item.num}`}}
											</view>
											<view class="ml5 number" v-else>
												{{`${item.num}`}}
											</view>
											<view class="box box-tb box-align-start box-pack-center ml10">
												<view class="times" style="font-size: 28rpx;">
													{{item.title}}
												</view>
												<view class="box box-align-center box-pack-start"
													v-if="item.time !=null">
													<u-image src="@/static/home/icon_mp4.png" width="31rpx"
														height="31rpx">
														<u-loading slot="loading"></u-loading>
													</u-image>
													<view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
														{{item.time}}
													</view>
												</view>
											</view>
										</view>
										<view class="box box-align-center box-pack-end" style="font-size: 24rpx;">
											已完成
											<view class="percent ml10">{{item.rate}}%</view>
										</view>
										<!-- <view class="box box-align-center box-pack-end" style="font-size: 24rpx;" v-if="stage.sections[index-1].unlocked ==true">
                                            已完成
                                            <view class="percent ml10">{{item.rate}}%</view>
                                        </view>
                                        <view class="box box-align-center box-pack-end" style="font-size: 24rpx;"
                                            v-else>
                                            <u-image src="@/static/class/icon_key.png" width="21rpx" height="25rpx"></u-image>
                                        </view> -->
									</view>
								</view>

							</view>
						</view>

					</u-collapse-item>
				</u-collapse>
			</view>
			<u-popup v-model="show" mode="bottom" border-radius="20" length="75%">
				<view class="content">
					<view class="tips active">
						课程详情
					</view>
					<view style="padding: 33rpx 52rpx;">
						<u-parse :html="cous.info" :selectable="true" :use-cache="true"></u-parse>
					</view>
				</view>
			</u-popup>
			<u-toast ref="uToast" />
		</view>
		<no-data title="暂无课程任务" v-else></no-data>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("user"),
				dclass: uni.getStorageSync("dclass"),
				stageList: [],
				cous: {
					image: '',
					name: '',
					material: ''
				},

				isPub: true, //是否发布课程
				show: false,
			}
		},
		onShow() {
			this.stuKcrwList();
		},
		onLoad() {
			// this.stuKcrwList();
		},
		methods: {
			stuKcrwList() {
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				let params = {
					schoolid: this.user.schoolId,
					classid: this.dclass.id,
					userid: this.user.id
				};
				this.$api.post({
					url: '/yclasscoustaskrecords/stuKcrwList'
				}, params).then(res => {
					uni.hideLoading()
					this.cous = res.data;
					this.stageList = res.list;
					console.log(res.list, 'RES.LIST');
				})
			},
			goDetail(item, index, i) {
				console.log(item, index, i);
				uni.navigateTo({
					url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
						'&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
				})
				return
				if (index == 0) {
					uni.navigateTo({
						url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
							'&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
					})
				} else {
					if (this.stageList[i].sections[index - 1].unlocked) { //判断上一个视频的进度是否超过95，如果超过直接播放下一个
						uni.navigateTo({
							url: '/stupageHome/chaperDetail?id=' + item.id + '&planid=' + this.cous.couslistid +
								'&cousid=' + this.cous.id + '&rate=' + item.rate + '&time=' + item.time
						})
					} else {
						this.$refs.uToast.show({
							title: '请先观看完上一个视频',
							type: 'info'
						})
					}
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.main {
		height: 100%;
		position: relative;
		overflow-y: auto;
	}

	.a-title {
		padding-left: 40rpx;
		width: 540rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.chapter {
		padding: 20rpx;
	}

	.list {
		width: 450prx;
	}

	.context {
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.posr {
		position: relative;

		.cont-detail {
			position: absolute;
			top: 30rpx;
			right: 20rpx;
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background: #F99115;
			box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
			;
			border-radius: 24rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 116rpx;
			background-color: rgba(46, 50, 61, .3);

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
			}

			.zb {
				color: #fff;
				font-size: 26rpx;
			}

			.sort {
				width: 132rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #FEAA19;
				border-radius: 24rpx;
				color: #fff;
			}
		}
	}

	.cont-top {
		background-color: #fff;
		display: flex;
		width: 100%;
		// border-bottom: 2rpx solid #F0F1F8;


		.tabbar {
			padding-left: 40rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: left;

			&.active:after {
				content: '';
				width: auto;
				width: 102rpx;
				height: 17rpx;
				background: #7C79F5;
				border-radius: 6rpx;
				display: block;
				margin-top: -32rpx;
				z-index: 111111;
			}
		}

		.cnt {
			margin-top: 20rpx;
			padding-left: 40rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #F4F6FA;
			color: #5F6572;
		}
	}

	.course-cont {
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 23px 46px 0px rgba(205, 207, 230, 0.18);
	}

	.slot-title {
		padding: 20rpx;
		height: 100rpx;
		margin-top: 30rpx;
	}

	.index {
		font-size: 36rpx;
		color: #AEB8C;
	}

	.percent {
		color: #626BF1;
	}

	.percents {
		color: #626BF1;
	}

	.number {
		font-size: 36rpx;
		font-weight: blod;
		color: #AEB8CF;
	}

	.content {
		padding: 40rpx 0;
	}

	.tips {
		font-size: 36rpx;
		width: 100%;
		padding-left: 40rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: left;

		&:after {
			content: '';
			width: auto;
			width: 144rpx;
			height: 17rpx;
			background: #7C79F5;
			border-radius: 6rpx;
			display: block;
			margin-top: -32rpx;
			z-index: 111111;
		}
	}

	.status {
		padding: 20rpx 37rpx;
		width: 636rpx;
		height: 100rpx;
		overflow: hidden;

		.ite {
			width: 100rpx;
		}

		.class-list {
			width: 430rpx;
			flex-wrap: wrap;

			.items {
				margin: 0 10rpx 10rpx 0;
				padding: 0 5rpx;
				width: auto;
				height: 32rpx;
				line-height: 32rpx;
				background: #FFFFFF;
				border: 1rpx solid #FDE6CB;
				border-radius: 4rpx;
				color: #F99115;
				font-size: 20rpx;
			}
		}

	}

	.times {
		font-size: 26rpx;
		color: #888F9E;
		width: 360rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>